<template>
  <div class="app-container water">
    <div class="water_export">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="设备编号" prop="equipmentno">
          <el-input v-model="queryParams.equipmentno" placeholder="请输入设备编号" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="隶属编号" prop="wellno">
          <el-input v-model="queryParams.wellno" placeholder="请输入隶属编号" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="出厂日期" prop="exfactorydate">
          <el-date-picker clearable size="small" v-model="queryParams.exfactorydate" type="date" value-format="yyyy-MM-dd" placeholder="选择出厂日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="使用状态" prop="enabled">
          <el-select v-model="queryParams.enabled" placeholder="请选择使用状态" clearable size="small">
            <el-option v-for="dict in dict.type.enabled" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button icon="el-icon-top-right" size="mini" @click="exportQuery">导出报表</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="water_totals">
      <div class="water_total">
        <span class="water_total_num">32</span>
        <span class="water_total_factor">污染水源</span>
      </div>
      <div class="water_total">
        <span class="water_total_num">32</span>
        <span class="water_total_factor">地热井水源</span>
      </div>
      <div class="water_total">
        <span class="water_total_num">32</span>
        <span class="water_total_factor">预警水源</span>
      </div>
    </div>

    <div class="water_table_charts">
      <div class="water_table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </div>
      <div class="water_charts">
        <div class="water_chart">
          <div class="chart_title">污染水源数量</div>
          <div class="chart_1">
            <direLine :options="lineoptions" @sendLineEcharts="getLineEcharts" />
          </div>
        </div>
        <div class="water_chart">
          <div class="chart_title">地热井水源质量</div>
          <div class="chart_2">
            <direBar :options="baroptions" @sendBarEcharts="getBarEcharts" />
          </div>
        </div>
        <div class="water_chart">
          <div class="chart_title">预警地热井数量</div>
          <div class="chart_3">
            <direPie :options="pieoptions" @sendPieEcharts="getPieEcharts" />
          </div>
        </div>

        <div class="water_chart">
          <div class="chart_title">预警水源处置</div>
          <div class="chart_4">
            <direPie :options="pieoptions1" @sendPieEcharts="getPieEcharts" />
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="water_details"></div> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import DireLine from "@/components/DireLine";
import DireBar from "@/components/DireBar";
import DirePie from "@/components/DirePie";
export default {
  components: { DireLine, DireBar, DirePie },
  dicts: ["enabled"],
  data() {
    return {
      lineoptions: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [170, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      },
      baroptions: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      },
      pieoptions: {
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 684, name: "Union Ads" },
              { value: 400, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      pieoptions1: {
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 848, name: "Search Engine" },
              { value: 535, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 684, name: "Union Ads" },
              { value: 400, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        equipmentno: null,
        wellno: null,
        exfactorydate: null,
        enabled: null,
      },
      // 表单参数
      form: {},
    };
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
  },
  created() {
    console.log(this.$refs)
  },
  methods: {
    getLineEcharts(chartsObj) {
      console.log(chartsObj);
    },
    getBarEcharts(chartsObj) {
      console.log(chartsObj);
    },
    getPieEcharts(chartsObj) {
      console.log(chartsObj);
    },
    // 表单重置
    reset() {
      this.wellname = null;
      this.form = {
        equipmentid: null,
        equipmentno: null,
        wellno: null,
        longitude: null,
        latitude: null,
        equipmentname: null,
        exfactorydate: null,
        equipmentfirm: null,
        equipmenttype: null,
        enabled: null,
        content: null,
        createtime: null,
        updatetime: null,
      };
      this.resetForm("form");
    },
    handleQuery() {
      console.log(this.queryParams);
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    exportQuery() {},
  },
};
</script>
<style lang="scss" scoped>
.water {
  .water_totals {
    display: flex;
    justify-content: space-around;
    justify-items: center;
    .water_total {
      display: flex;
      height: 60px;
      border: 1px solid rgb(133, 14, 14);
      flex-direction: column;
      width: 200px;
      color: #fff;
      text-align: center;
      justify-content: center;
      justify-items: center;
      font-size: 20px;
      border-radius: 10px;
      .water_total_num {
      }
      .water_total_factor {
      }
    }
    .water_total:nth-child(1) {
      background-color: #f59a23;
    }
    .water_total:nth-child(2) {
      background-color: #008080;
    }
    .water_total:nth-child(3) {
      background-color: #027db4;
    }
  }
  .water_export {
    /* margin-top: 30px; */
    margin-left: 7%;
    .el-form-item {
      margin-bottom: 10px;
    }
  }
  .water_table_charts {
    display: flex;
    flex-direction: rows;
    flex-wrap: wrap;
    justify-items: center;
    justify-content: space-around;
    .water_table {
      padding: 8px;
      width: 48%;
      margin-top: 30px;
      border: 2px dotted rgb(127, 193, 203);
    }
    .water_charts {
      width: 50%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-items: center;
      justify-content: center;
      .water_chart {
        margin-top: 30px;
        margin-right: 30px;
        flex: 0 0 40%;
        height: 320px;
        border: 2px dotted rgb(127, 193, 203);

        .chart_title {
          /* border: 1px solid rgb(45, 219, 11); */
          text-align: center;
          font-size: 18px;
          margin-bottom: 10px;
        }
        .chart_1 {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

          height: 90%;
        }
        .chart_2 {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          height: 90%;
        }
        .chart_3 {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          height: 90%;
        }
        .chart_4 {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          height: 90%;
        }
      }
    }
  }

  .water_details {
    border: 1px solid rgb(0, 255, 191);
    /* height: 250px; */
  }
}
</style>
